<template>
	<div>
		changeInfo


		<div>
			<input type="text" v-model="name" placeholder="请输入姓名"> <br>
			<input type="text" v-model="age" placeholder="请输入年龄"> <br>
			<input type="text" v-model="like" placeholder="请输入喜好"><br>
			<button @click="setUserInfo(userInfoByinput)" v-bind:class="commit">提交</button>
		</div>

		<div>
			<li>{{userInfo.name}}</li>
			<li>{{userInfo.age}}</li>
			<li>{{userInfo.like}}</li>
		</div>


		<br>
		<button @click="goToHome" v-bind:class="goBackBtn">回首页</button>

	</div>
</template>

<script>
    import {mapActions, mapGetters} from 'vuex'

    export default {
        name: "ChangeInfo",
        data: function () {
            return {
                name: '',
                age: '',
                like: '',
                goBackBtn: 'goBackBtn',
                commit: 'commit'
            }
        },
        methods: {
            goToHome: function () {
                this.$router.back('/home')
            },
            ...mapActions('userInfo', ['setUserInfo'])
        },
        computed: {
            ...mapGetters('userInfo', {userInfo: 'getUserInfo'}),
            userInfoByinput: function () {
                let userInfo = {
                    name: this.name,
                    age: this.age,
                    like: this.like
                }
                return userInfo
            },
        }
    }
</script>

<style scoped>
	.commit {
		background-color: #7FFF00;
	}

	.goBackBtn {
		background-color: #333cca;
		color: #aa0011;
		font-size: 30px;
	}

</style>